<template>
  <view class="reward-container">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
    <!-- 活动列表 -->
    <view class="activity-list">
      <view 
        class="activity-card" 
        v-for="(activity, index) in activities" 
        :key="index"
        @tap="handleActivityTap(activity)"
      >
        <image class="activity-image" :src="activity.image" mode="aspectFill"></image>
        <view class="activity-info">
          <view class="activity-header">
            <text class="activity-title">{{activity.title}}</text>
            <text class="activity-status" :class="activity.status">{{activity.statusText}}</text>
          </view>
          <view class="activity-desc">{{activity.description}}</view>
          <view class="activity-details">
            <view class="detail-item">
              <text class="label">奖励金额</text>
              <text class="value">¥{{activity.reward}}</text>
            </view>
            <view class="detail-item">
              <text class="label">参与人数</text>
              <text class="value">{{activity.participants}}人</text>
            </view>
            <view class="detail-item">
              <text class="label">剩余时间</text>
              <text class="value">{{activity.remainingDays}}天</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 无数据提示 -->
    <view class="empty-state" v-if="activities.length === 0">
      <image src="/static/empty-state.png" mode="aspectFit"></image>
      <text>暂无活动</text>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      activities: [
        {
          id: 1,
          title: '优秀技师评选',
          description: '寻找最优秀的按摩技师，展示专业技能，分享成功经验',
          image: '/static/collaborate/activity-1.png',
          reward: '5000',
          participants: 128,
          remainingDays: 15,
          status: 'ongoing',
          statusText: '进行中'
        },
        {
          id: 2,
          title: '创新服务方案',
          description: '征集创新的按摩服务方案，提升顾客体验',
          image: '/static/collaborate/activity-2.png',
          reward: '3000',
          participants: 56,
          remainingDays: 7,
          status: 'urgent',
          statusText: '即将结束'
        },
        {
          id: 3,
          title: '门店装修设计',
          description: '征集特色门店装修设计方案，打造独特品牌形象',
          image: '/static/collaborate/activity-3.png',
          reward: '8000',
          participants: 89,
          remainingDays: 30,
          status: 'ongoing',
          statusText: '进行中'
        }
      ]
    }
  },
  onLoad() {
    console.log('Reward page loaded')
  },
  onShow() {
    console.log('Reward page shown')
  },
  methods: {
    handleActivityTap(activity) {
      uni.navigateTo({
        url: `/pages/activity-detail/activity-detail?id=${activity.id}`,
        fail: (err) => {
          console.error('Navigation failed:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.reward-container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 40rpx;

  .banner {
    position: relative;
    height: 300rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }

    .banner-text {
      position: absolute;
      left: 40rpx;
      bottom: 40rpx;
      color: #FFFFFF;

      .title {
        font-size: 48rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
      }

      .subtitle {
        font-size: 28rpx;
        opacity: 0.9;
      }
    }
  }

  .activity-list {
    padding: 30rpx;

    .activity-card {
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

      .activity-image {
        width: 100%;
        height: 300rpx;
      }

      .activity-info {
        padding: 30rpx;

        .activity-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .activity-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
          }

          .activity-status {
            padding: 4rpx 16rpx;
            border-radius: 20rpx;
            font-size: 24rpx;

            &.ongoing {
              background: rgba(43, 135, 255, 0.1);
              color: #2B87FF;
            }

            &.urgent {
              background: rgba(255, 87, 51, 0.1);
              color: #FF5733;
            }
          }
        }

        .activity-desc {
          font-size: 28rpx;
          color: #666666;
          line-height: 1.5;
          margin-bottom: 24rpx;
        }

        .activity-details {
          display: flex;
          justify-content: space-between;
          border-top: 2rpx solid #F5F5F5;
          padding-top: 24rpx;

          .detail-item {
            text-align: center;

            .label {
              font-size: 24rpx;
              color: #999999;
              display: block;
              margin-bottom: 8rpx;
            }

            .value {
              font-size: 28rpx;
              color: #333333;
              font-weight: 500;
            }
          }
        }
      }

      &:active {
        transform: scale(0.98);
        transition: transform 0.2s;
      }
    }
  }

  .empty-state {
    padding: 100rpx 0;
    text-align: center;

    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }

    text {
      font-size: 28rpx;
      color: #999999;
    }
  }
}
</style> 